<template>
  <div class="box">
    <ul class="list-item" id="hot" v-for="(goods) in goods" :key="goods.id">
      <div class="title">
        <p class="proImg">
          <img :src="'/'+goods.TipsUrl" />
        </p>
        <p class="proTips">{{goods.proTips}}</p>
      </div>
      <li v-for="(seller,i) in goods.types" :key="i" @click="detail(seller)">
        <div class="imgcontainer">
          <div class="picimg">
            <img :src="'/'+seller.url" />
          </div>
        </div>
        <div class="aboutmassage">
          <div class="price">
            <span class="pre">{{seller.prePrice}}</span>
            <span class="now">{{seller.nowPrice}}</span>
          </div>
          <span class="name">{{seller.name}}</span>
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
import {GOODS} from '@/api'
import * as types from '@/store/mutation-type'
export default {
  name: 'SellerList',
  data () {
    return {
      goods: []
    }
  },
  created () {
    this.$http({
      url: GOODS
    }).then(res => {
      console.log(res)
      this.goods = res.data
    })
  },
  methods: {
    detail (seller) {
      this.$store.commit(types.ADD_SELLER, seller)
      this.$router.push('/seller')
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  background-color: #fafafa;
  height: 45.333333rem;
  overflow: hidden;
  #hot {
    width: 100%;
    overflow-x: hidden;
  }
  .list-item {
    padding-left: 0;
    list-style: none;
    margin-left: .253333rem;
    .title {
      display: table;
      height: 1.266667rem;
      .proImg {
        display: table-cell;
        height: 1.266667rem;
        text-align: center;
        vertical-align: middle;
        img {
          width: 0.4rem;
          height: 0.533rem;
          margin: 0rem 0.266667rem;
        }
      }
      .proTips {
        margin: 0;
        display: inline-block;
        font-size: 0.373333rem;
        line-height: 1.266667rem;
      }
    }
    li {
      float: left;
      width: 4.4rem;
      height: 6.266667rem;
      margin-right: 0.333333rem;
      background: #ffffff;
      border: 1px solid #dddddd;
      .imgcontainer {
        width: 100%;
        height: 4.25rem;
        display: table;
        text-align: center;
        .picimg {
          display: table-cell;
          vertical-align: middle;
        }
      }
      .aboutmassage {
        display: block;
        height: 0.506667rem;
        line-height: 0.506667rem;
        padding: 0;
        .price {
          height: 0.506667rem;
          line-height: 0.506667rem;
          .pre {
            font-size: 0.375067rem;
            color: red;
            float: left;
            margin-left: 0.4rem;
          }
          .now {
            font-size: 0.312533rem;
            float: right;
            text-decoration: line-through;
            margin-right: 0.5rem;
          }
        }
        .name {
          font-size: 0.35rem;
          color: #666666;
          line-height: 0.586667rem;
          margin: 0 0.35rem;
          display: block
        }
      }
    }
  }
}
</style>
